import * as THREE from 'three'
import { gui } from '../gui'
import { stats } from '../stats'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

function createCourse11 (dom: HTMLElement) {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000)

  const render = new THREE.WebGLRenderer()
  render.setClearColor(new THREE.Color(0x000000))
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  // show axes in the screen
  const axes = new THREE.AxesHelper(50)
  scene.add(axes)

  loadModel()

  const planeGeometry = new THREE.PlaneGeometry(100, 100)
  const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xAAAAAA })
  const plane = new THREE.Mesh(planeGeometry, planeMaterial)

  plane.rotation.x = -0.5 * Math.PI
  plane.position.set(15, 0, 0)
  plane.receiveShadow = true

  scene.add(plane)

  camera.position.x = -5
  camera.position.y = 5
  camera.position.z = 5
  camera.lookAt(scene.position)
  scene.add(camera)

  const directionalLight = new THREE.DirectionalLight(0xffffff, 4)
  directionalLight.castShadow = true
  directionalLight.shadow.mapSize.width = 2048
  directionalLight.shadow.mapSize.height = 2048
  directionalLight.position.set(20, 20, 20)
  scene.add(directionalLight)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x00ff00, 1)
  hemisphereLight.position.set(100, 50, 100)
  scene.add(hemisphereLight)

  const ctrlObj = {
    hemisphereLightVisible: true,
    skyColor: 0xffffff,
    groundColor: 0x00ff00,
    hemisphereIntensity: 1
  }

  const ctrl = gui
  const hemisphereLightFolder = ctrl.addFolder('hemisphereLight')
  hemisphereLightFolder.add(ctrlObj, 'hemisphereLightVisible').onChange(function (e: boolean) {
    hemisphereLight.visible = e
  })

  hemisphereLightFolder.addColor(ctrlObj, 'skyColor').onChange(function (e: number) {
    hemisphereLight.color = new THREE.Color(e)
  })

  hemisphereLightFolder.addColor(ctrlObj, 'groundColor').onChange(function (e: number) {
    hemisphereLight.groundColor = new THREE.Color(e)
  })

  hemisphereLightFolder.add(ctrlObj, 'hemisphereIntensity', 0, 10).onChange(function (e: number) {
    hemisphereLight.intensity = e
  })

  function loadModel () {
    const url = 'https://dongli-three.oss-cn-shanghai.aliyuncs.com/untitled.glb'
    new GLTFLoader()
      .load(url, function (gltf) {
        gltf.scene.scale.set(0.01, 0.01, 0.01)
        gltf.scene.traverse(function (object) {
          if (object.type === 'Mesh') { object.castShadow = true }
        })

        scene.add(gltf.scene)
      })
  }
  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  return { camera, scene, render }
}

export {
  createCourse11
}
